<!-- 日志 -->
<template>
  <div class="">
    <el-card class="card-type">
      <div slot="header" class="clearfix">
        <span>日志信息</span>
      </div>
      <el-timeline>
        <el-timeline-item
          v-for="(item, index) in LogData"
          :key="index"
          :icon="item.icon"
          :type="item.type"
          :color="item.color"
          :size="item.size"
          placement="top"
          :timestamp="String(item.date)"
        >
          <el-card>
            <el-link
              @click.native="handleInfo(item)"
              :underline="false"
            >{{item.introduction}}</el-link>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-card>
    <el-dialog title="文件" :visible.sync="dialogScreenVisible">
      <upload-file :selectMenu="selectMenu" :allowUpload="false"></upload-file>
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { getLogFileMenu } from "@/api/systemLog";
import uploadFile from "@/views/upload/uploadFile";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: { uploadFile },
  props: {
    LogData: {
      type: Array,
      default: []
    }
  },
  data() {
    //这里存放数据
    return {
      activities: [
        {
          content: "支持使用图标",
          timestamp: "2018-04-12 20:46",
          size: "large",
          type: "primary",
          icon: "el-icon-more"
        },
        {
          content: "支持自定义颜色",
          timestamp: "2018-04-03 20:46",
          color: "#0bbd87"
        },
        {
          content: "支持自定义尺寸",
          timestamp: "2018-04-03 20:46",
          size: "large"
        },
        {
          content: "默认样式的节点",
          timestamp: "2018-04-03 20:46"
        }
      ],
      dialogScreenVisible: false,
      selectMenu: {}
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleInfo(data) {
      let info = {
        roomGuid: data.roomGuid,
        logType: data.logType,
        operationType: data.operationType
      };
      getLogFileMenu(info).then(res => {
        if (res.body != null) {
          this.dialogScreenVisible = true;
          this.selectMenu = res.body;
        }
      });
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.card-type {
  margin: 20px;
}
</style>